import React, { Component } from 'react';
import style from './style.todo';
import { Button, IconButton } from 'sq-ui';
import util from '../../util';
import cx from 'classnames';

class TodoItem extends Component {

  state = {
    complete: false,
    editing: false,
  };

  toggleComplete = () => {
    this.props.updateTodo({
      isFinished: !this.state.complete,
    }, () => {
      this.setState({
        complete: !this.state.complete,
      });
    });
  };

  toggleEdit = () => {
    this.setState({
      editing: !this.state.editing,
    });
  };

  updateTodo = () => {
    this.props.updateTodo({
      content: this.refs.input.value,
    }, () => {
      this.props.fetch(() => {
        this.toggleEdit();
      });
    });
  };

  deleteTodo = () => {
    this.props.deleteTodo(() => {
      this.props.fetch(() => {
        this.toggleEdit();
      });
    });
  };

  toggleCheck = (e) => {
    this.props.updateTodo({
      isFinished: 1 - this.props.isFinished,
    }, () => {
      this.props.fetch();
    });
  };

  renderInput() {
    const check = (
      <input
        checked={this.props.isFinished}
        className={style.check}
        type="checkbox"
        onChange={this.toggleCheck}
      />
    );
    if (!this.state.editing) return (
      <div>
        {check}
        <span
          onClick={this.toggleEdit}
          className={cx(style.content, {
            [style.completed]: this.props.isFinished,
          })}
        >
          {this.props.content}
        </span>
      </div>
    );
    return (
      <div>
        {check}
        <input
          className={style.input}
          defaultValue={this.props.content}
          ref="input"
          autoFocus
        />
        <span>
          <button className={style.sure} onClick={this.updateTodo}>更新</button>
          <button className={style.cancel} onClick={this.toggleEdit}>取消</button>
          <IconButton
            onClick={this.deleteTodo}
            className={style.del}
            icon="delete"
          />
        </span>
      </div>
    );
  }

  render() {
    return (
      <div
        className={style.item}
      >
        { this.renderInput() }
      </div>
    );
  }
}

class TodoList extends Component {

  state = {
    add: false,
    data: [],
  };

  toggleAdd = () => {
    this.setState({
      add: !this.state.add,
    });
  };

  fetchTodoList = (cb) => {
    this.props.fetchTodoList(this.props.keyResultId, res => {
      this.setState({
        data: res.data,
      }, () => {
        cb && cb();
      });
    });
  };

  create = () => {
    this.props.createTodo(this.props.keyResultId, {
      content: this.refs.input.value,
    }, () => {
      this.fetchTodoList(() => {
        this.toggleAdd();
      });
    });
  };

  componentWillMount() {
    this.fetchTodoList();
  }

  renderAdd() {
    if (!this.state.add) return (
      <div className={style.add}>
        <Button
          blueSimpleLine
          className={style.addButton}
          hover
          icon="plus"
          label="添加待办事项"
          onClick={this.toggleAdd}
        />
      </div>
    );
    return (
      <div className={style.add}>
        <input
          ref="input"
          autoFocus
          className={style.input}
        />
        <span>
          <button className={style.sure} onClick={this.create}>更新</button>
          <button className={style.cancel} onClick={this.toggleAdd}>取消</button>
        </span>
      </div>
    );
  }

  render() {
    return (
      <div
        className={style.root}
      >
        {
          this.state.data.map((v, i) => (
            <TodoItem
              key={i}
              {...v}
              fetch={this.fetchTodoList}
              updateTodo={this.props.updateTodo.bind(null, v.keyResultId, v.backlogItemId)}
              deleteTodo={this.props.deleteTodo.bind(null, v.keyResultId, v.backlogItemId)}
            />
          ))
        }
        {/* {this.renderAdd()} */}
      </div>
    );
  };
}

export default TodoList;
